<template>
  <div class="wrapper">
    <ul>
      <li>
        <div class="div_fixed_wh">
          <p>固定宽度一个元素</p>
          <p>好巧，我也是</p>
        </div>
      </li>
      <li>
        <div class="div_flexble_wh">不定宽高垂直水平居中</div>
      </li>
      <li>
        <div class="div_fixed_wh2">固定宽高元素垂直水平居中</div>
      </li>
      <li>
        <div class="div_flex_style">
          <p>弹性布局实现居中</p>
        </div>
      </li>
      <li>
        <div class="div_tablecell_wh">tablecell实现紫色中居中</div>
      </li>
      <li>
        <div style="line-height:200px;height:200; text-align: center;">
          line-height文本居中
        </div>
      </li>
    </ul>
    <div class="box__shadow">
      <div class="box__shadow_ouset">默认外发光（正向）</div>
      <div class="box__shadow_spread">反向扩展</div>
      <div class="box__shadow_position">
        box-shadow 5个参数 offset-x offset-y blur-radius spread-radius 颜色
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>
<style scoped>
.wrapper ul {
  display: flex;
  justify-content: flex-start;
  list-style: none;
  flex-flow: wrap;
}
.wrapper ul li {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  margin: 20px;
  position: relative;
}
/* 定宽高元素水平垂直居中 */
.div_fixed_wh {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid #fcc;
  top: 50%;
  left: 50%;
  text-align: center;
  margin-top: -50px;
  margin-left: -50px;
}
/* 不定宽高的垂直水平居中 */
.div_flexble_wh {
  position: absolute;
  border: 1px solid #0c0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* 定宽高 */
.div_fixed_wh2 {
  position: absolute;
  width: 100px;
  height: 42px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 1px solid #00c;
  text-align: center;
  vertical-align: middle;
}
/* 弹性布局实现居中 */
.div_flex_style {
  height: 100%;
  width: 100%;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  border: 1px solid #0cc;
  align-items: center;
}
.div_tablecell_wh {
  position: relative;
  border: 1px solid #c0c;
  width: 200px;
  height: 200px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.div_tablecell_wh p {
  width: 100px;
  height: 30px;
}

.div_text_center {
  text-align: center;
  border: 1px solid #f00;
  width: 200px;
  height: 200px;
  line-height: 200px;
}

/* 阴影 */
.box__shadow {
  width: 100%;
  height: 120px;
  /* border: 1px solid purple; */
  /* box-shadow: 20px 10px 5px yellow inset; */
  display: flex;
}
.box__shadow_ouset {
  width: 24%;
  margin: 8px;
  height: 100px;
  border: 5px dotted #f00;
  box-shadow: 0 0 20px #111;
}
.box__shadow_spread {
  width: 24%;
  margin: 8px;
  box-shadow: 0 0 20px -6px green;
}
.box__shadow_position {
  margin-top: 8px;
  margin-left: 18px;
  width: 40%;
  border: 5px dashed #783923;
  box-shadow: 10px 10px 5px 2px pink;
}
</style>
